<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>000HelloWorld</title>
    <style>
        #app span {
            display: block;
        }

        .tips {
            color: #999;
        }
    </style>
</head>

<body>
<div id="app">


    <div style="position: fixed;top: 0;width: 100%;background-color: #D0D0D0">
        <fieldset>
            <legend>双向绑定数据输入框</legend>
            <input type="text" v-model="message" name="" id="">
            <span onclick="vm.message='<b>Hello Vue</b>'">点我恢复初值</span></font>
        </fieldset>
    </div>

    <fieldset style="margin-top: 59px">
        <legend>绑定数据转义输出（转义html代码）</legend>
        <span>{{message}}</span>
    </fieldset>

    <fieldset>
        <legend>{{* data}} 只引用初值</legend>
        <span>{{* message}}</span>
    </fieldset>

    <fieldset>
        <legend>{{{data}}}原始html输出 & 绑定dom属性值（title，color 等）</legend>

        <span title="item-{{message}}">{{{message}}}</span>

        <font color="{{message}}" size="{{message}}">{{{message}}} <span onclick="vm.message='#f0f'">点我红色</span></font>
    </fieldset>


    <fieldset>
        <legend>到目前为止，我们的模板只绑定到简单的属性键。
            不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式：
        </legend>
        <span>{{(message?message:null)+" or"}}</span>
    </fieldset>

    <fieldset>
        <legend>这些表达式将在所属的 Vue 实例的作用域内计算。
            一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：
        </legend>
        <pre><span>{{var a=1}}</span></pre>
        <font color="red">[Vue warn]: Avoid using reserved keywords in expression: var a=1</font>
    </fieldset>

    <fieldset>
        <legend>Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”，以“管道符”指示：</legend>
        {{"h大写"+message|capitalize}}
    </fieldset>

    <fieldset>
        <legend>过滤器也可以接受参数
            过滤器函数始终以表达式的值作为第一个参数。
            带引号的参数视为字符串，而不带引号的参数按表达式计算。
            这里，字符串 'arg1' 将传给过滤器作为第二个参数，表达式 arg2 的值在计算出来之后作为第三个参数。
        </legend>
        <pre v-pre>{{ message | filterA 'arg1' arg2 }}</pre>
        <span class="tips">v-pre 可以关闭子节点dom的{{}}语法</span>
    </fieldset>


    <fieldset>
        <legend>v-if 和 v-show 指令</legend>
        <span v-if="!message">message为空</span>
        <span v-if="message">message不为空</span>
        <span class="tips">v-if 为 false 时dom不存在</span>
        <span class="tips">v-show 为 false 时dom存在,样式不可见</span>
    </fieldset>

    <fieldset>
        <legend>这里 href 是参数，
            它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。
            可能你已注意到可以用特性插值 href="{{url}}" 获得同样的结果：这样没错，
            并且实际上在内部特性插值会转为 v-bind 绑定
        </legend>
        <span>
            {{message}} <a v-if="message" v-bind:href="url">搜索</a>
        </span>
    </fieldset>


    <fieldset>
        <legend>v-bind 可以缩写被省掉 :href & v-on 可以缩写被省掉 @click</legend>
        <span>
            {{message}} <a v-if="message" :href="url">搜索</a>
        </span>
        <span @click="alertMessage">
            {{message}} <a v-if="message" :href="url">搜索</a>
        </span>
    </fieldset>

    <fieldset>
        <legend>修饰符 (Modifiers) 是以半角句号 .
            开始的特殊后缀，用于表示指令应当以特殊方式绑定。
            例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式：
        </legend>
        <span>
            {{message}} <a v-if="message" v-bind:href.literal="url">搜索</a>
        </span>
    </fieldset>

</div>
</body>
<script src="../vendor/vue1.0.26.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {message: "<b>Hello Vue</b>", url: ""},
        methods: {
            alertMessage: function () {
                alert(this.message);
            }
        }
    })
    vm.$watch("message", function (newVal) {
        vm.url = "https://www.baidu.com/s?wd=" + newVal + "&rsv_spt=1&rsv_iqid=0x8c9ad5640000a435&issp=1&f=3&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&inputT=762"
    })
</script>

</html>